<html>

<head>
    <style>
        .cell {
            margin: 2px;
            width: 64px;
            height: 64px;
            border-color: black;
            border-style: solid;
        }

        .black {
            background-color: brown;
        }

        .white {
            background-color: grey;
        }

        img {
            width: 60px;
            height: 50px;
        }

    </style>

    <script>

        var figure_for_move = null;
        var offX, offY;

        function click_figure(figure, event) {
            if (!figure_for_move) {
                figure_for_move = figure;
                offX = event.offsetX;
                offY = event.offsetY;
                event.cancelBubble = true;
            }
        }

        function click_cell(cell, event) {

            if (figure_for_move) {
                figure_for_move.parentElement.innerHTML = "";
                cell.innerHTML = figure_for_move.outerHTML;
                figure_for_move = null;
                event.cancelBubble = true;
            }
        }

        function init() {
        }

    </script>
</head>

<body>

<Table>
    <tr>
        <td class="black cell" onclick="click_cell(this, event)">
                <span onclick="click_figure(this, event)" class="moveable">
                    <img src="4w-Queen.png"/>
                </span>
        </td>
        <td class="white cell" onclick="click_cell(this, event)"></td>
        <td class="black cell" onclick="click_cell(this, event)"></td>
        <td class="white cell" onclick="click_cell(this, event)"></td>
    </tr>
    <tr>
        <td class="white cell" onclick="click_cell(this, event)"></td>
        <td class="black cell" onclick="click_cell(this, event)"></td>
        <td class="white cell" onclick="click_cell(this, event)"></td>
        <td class="black cell" onclick="click_cell(this, event)"></td>
    </tr>
    <tr>
        <td class="black cell" onclick="click_cell(this, event)"></td>
        <td class="white cell" onclick="click_cell(this, event)"></td>
        <td class="black cell" onclick="click_cell(this, event)"></td>
        <td class="white cell" onclick="click_cell(this, event)"></td>
    </tr>
    <tr>
        <td class="white cell" onclick="click_cell(this, event)"></td>
        <td class="black cell" onclick="click_cell(this, event)"></td>
        <td class="white cell" onclick="click_cell(this, event)"></td>
        <td class="black cell" onclick="click_cell(this, event)"></td>
    </tr>
</Table>

</body>

</html>
